<script lang="ts" setup>
import { reactive, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import JxudpDataSourceServiceApi from "@/api/modules/org/bean/jxudp-data-source";
import { JxudpDataSourceAddUrl, JxudpDataSourceEditUrl } from "@/views/org/mapping.json";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
import { useJxtechPageTableExt } from "@/comp-ext";
import { jumpPath } from "@/utils/router-kit";

const JxudpDataSourcePageTableRef = ref();
const { loadTable, deleteSelectionDataList } = useJxtechPageTableExt(JxudpDataSourcePageTableRef);
const router = useRouter();
const tableColumn: JxtechPageTableColumn[] = [
  { label: "序号", width: "50", type: "selection" },
  { label: "序号", width: "50", type: "index" },
  {
    prop: "dataSourceId",
    label: "数据源名称",
    width: "180",
    align: "left",
    showOverflowTooltip: true,
    sort: true,
    type: "link",
    linkClick: (row: any) => {
      router.push({ path: JxudpDataSourceEditUrl + row.dataSourceId });
    }
  },
  {
    prop: "dataSourceDesc",
    label: "数据源描述",
    align: "left",
    showOverflowTooltip: true,
    columnKey: "dataSourceDesc"
  },
  {
    prop: "connUrl",
    label: "连接字符串",
    align: "left",
    showOverflowTooltip: true,
    columnKey: "connUrl"
  },
  {
    prop: "driverClass",
    label: "驱动",
    align: "left",
    showOverflowTooltip: true,
    columnKey: "driverClass"
  },
  { prop: "jndiName", label: "JNDI名称", showOverflowTooltip: true, columnKey: "jndiName" },
  { prop: "jndi", label: "是否为JNDI", columnKey: "jndi", slot: "customJndi" }
];

const JxudpDataSourceState = reactive({
  // ////////////////////搜索部分/////////////////////////////////////////
  queryParam: { likeAll: null },
  ///////////////////////表格部分//////////////////////////////////////
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) => JxudpDataSourceServiceApi.queryPage(null, { ...params, ...JxudpDataSourceState.queryParam }),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) => JxudpDataSourceServiceApi.exportData(null, { ...params, ...JxudpDataSourceState.queryParam }),
  /**
   * 表格删除事件
   */
  deleteTableData: () => deleteSelectionDataList(JxudpDataSourceServiceApi),
  /**
   * 搜索事件触发
   */
  handleSearch: () => loadTable(),
  onAddButtonClick: () => {
    jumpPath(JxudpDataSourceAddUrl);
  }
});

defineExpose({
  loadTable: () => loadTable()
});
</script>
<template>
  <jxtech-basic-card title="多数据源信息">
    <template #operationSpace>
      <jxtech-search-input
        tips="数据源描述/连接字符串"
        v-model="JxudpDataSourceState.queryParam.likeAll"
        @search="JxudpDataSourceState.handleSearch"
      >
      </jxtech-search-input>
      <jxtech-add-button @click="JxudpDataSourceState.onAddButtonClick" v-auth="'org:xtpz:dsjygl:save'"> </jxtech-add-button>
      <jxtech-delete-button
        @click="JxudpDataSourceState.deleteTableData"
        v-auth="'org:xtpz:dsjygl:delete'"
      ></jxtech-delete-button>
    </template>
    <JxtechPageTableExt
      ref="JxudpDataSourcePageTableRef"
      row-key="dataSourceId"
      :table-column="tableColumn"
      :load-data="JxudpDataSourceState.loadData"
      :download-show="false"
      fit="full"
    >
      <template #customJndi="{ row }">
        <el-tag v-if="row.jndi" class="ml-2" type="success">是</el-tag>
        <el-tag v-else class="ml-2" type="warning">否</el-tag>
      </template>
    </JxtechPageTableExt>
  </jxtech-basic-card>
</template>

<style scoped></style>
